{% extends 'mobile_app/base.html' %}
{% load static %}

{% block title %}仪表板 - 郑州移不动{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">
                <i class="fas fa-tachometer-alt text-primary me-2"></i>仪表板
            </h2>
            {% if primary_phone %}
                <span class="badge bg-primary fs-6">
                    <i class="fas fa-phone me-1"></i>{{ primary_phone.number }}
                </span>
            {% endif %}
        </div>
    </div>
</div>

{% if primary_phone %}
    <!-- 主要信息卡片 -->
    <div class="row g-4 mb-4">
        <!-- 余额信息 -->
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <i class="fas fa-wallet text-success mb-3" style="font-size: 2.5rem;"></i>
                    <h4 class="text-success fw-bold">¥{{ balance.amount|floatformat:2 }}</h4>
                    <p class="text-muted mb-0">账户余额</p>
                </div>
            </div>
        </div>

        <!-- 流量信息 -->
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <i class="fas fa-wifi text-info mb-3" style="font-size: 2.5rem;"></i>
                    <h4 class="text-info fw-bold">{{ balance.data_remaining }}MB</h4>
                    <p class="text-muted mb-0">剩余流量</p>
                </div>
            </div>
        </div>

        <!-- 语音信息 -->
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <i class="fas fa-phone text-warning mb-3" style="font-size: 2.5rem;"></i>
                    <h4 class="text-warning fw-bold">{{ balance.voice_remaining }}分钟</h4>
                    <p class="text-muted mb-0">剩余语音</p>
                </div>
            </div>
        </div>

        <!-- 短信信息 -->
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <i class="fas fa-sms text-danger mb-3" style="font-size: 2.5rem;"></i>
                    <h4 class="text-danger fw-bold">{{ balance.sms_remaining }}条</h4>
                    <p class="text-muted mb-0">剩余短信</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 套餐信息和操作按钮 -->
    <div class="row g-4 mb-4">
        <!-- 当前套餐 -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-mobile-alt me-2"></i>当前套餐
                    </h5>
                </div>
                <div class="card-body">
                    {% if phone_plan %}
                        <h4 class="text-primary">{{ phone_plan.plan.name }}</h4>
                        <p class="text-muted">{{ phone_plan.plan.description }}</p>
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="border-end">
                                    <h6 class="text-success">¥{{ phone_plan.plan.monthly_fee }}</h6>
                                    <small class="text-muted">月费</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="border-end">
                                    <h6 class="text-info">{{ phone_plan.plan.data_allowance }}MB</h6>
                                    <small class="text-muted">流量</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <h6 class="text-warning">{{ phone_plan.plan.voice_allowance }}分钟</h6>
                                <small class="text-muted">语音</small>
                            </div>
                        </div>
                    {% else %}
                        <div class="text-center text-muted">
                            <i class="fas fa-exclamation-triangle mb-3" style="font-size: 3rem;"></i>
                            <h5>未选择套餐</h5>
                            <p>请为您的号码选择一个合适的套餐</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 快速操作 -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>快速操作
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'mobile_app:balance_query' primary_phone.id %}" class="btn btn-outline-primary">
                            <i class="fas fa-search me-2"></i>详细查询
                        </a>
                        <a href="{% url 'mobile_app:payment' primary_phone.id %}" class="btn btn-outline-success">
                            <i class="fas fa-credit-card me-2"></i>立即缴费
                        </a>
                        <a href="{% url 'mobile_app:plan_management' primary_phone.id %}" class="btn btn-outline-warning">
                            <i class="fas fa-cog me-2"></i>套餐管理
                        </a>
                        <a href="{% url 'mobile_app:switch_phone' %}" class="btn btn-outline-info">
                            <i class="fas fa-exchange-alt me-2"></i>切换号码
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近缴费记录 -->
    {% if recent_payments %}
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2"></i>最近缴费记录
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>缴费时间</th>
                                    <th>金额</th>
                                    <th>方式</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payment in recent_payments %}
                                <tr>
                                    <td>{{ payment.payment_time|date:"Y-m-d H:i" }}</td>
                                    <td class="text-success fw-bold">¥{{ payment.amount }}</td>
                                    <td>
                                        <span class="badge bg-secondary">
                                            {{ payment.get_payment_method_display }}
                                        </span>
                                    </td>
                                    <td>{{ payment.description|default:"-" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

{% else %}
    <!-- 没有号码时的提示 -->
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center py-5">
                    <i class="fas fa-phone-slash text-muted mb-4" style="font-size: 4rem;"></i>
                    <h4 class="text-muted mb-3">还没有添加手机号码</h4>
                    <p class="text-muted mb-4">请先添加您的手机号码，然后就可以开始使用各项功能了</p>
                    <a href="{% url 'mobile_app:phone_management' %}" class="btn btn-primary btn-lg">
                        <i class="fas fa-plus me-2"></i>添加手机号码
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 自动刷新余额信息（每30秒）
    setInterval(function() {
        if (window.location.pathname === '{% url "mobile_app:dashboard" %}') {
            location.reload();
        }
    }, 30000);
});
</script>
{% endblock %}
